import React, { useState, useCallback } from 'react';
import Context from './context';
import Child from './Child';
import ShowNum from './ShowNum';
import Buttons from './Buttons';
import Button from './Button';
import { MathStore } from './reducer';
import Content from './Content';
function Count() {
  const [count, setCount] = useState(0);
  const [number, setNumber] = useState(0);
  const [count1, setCount1] = useState(0);
  const [count2, setCount2] = useState(0);
  const [count3, setCount3] = useState(0);

  // 不做任何处理 每次更新之后都相当与是返回了一个新的函数 所以Button会跟着 刷新
  const handleClickButton1 = () => {
    setCount1(count1 + 1);
  };
  // 使用useCallBack 包裹之后 只有count2改变了才返回一个新的函数 所以在这种情况下 传递给Button组件的函数
  // 只有在count2改变了才会是一个新的函数 所以不像其他两个一个 点谁都会刷新组件
  // 点击会刷新组件是因为 修改了state所以会刷新子组件
  // 所以对于子组件的传参函数而言 useCallback 是需要和memo搭配使用的
  // 而对于自身这样做的好处就是每次刷新的时候不再去创建一个新的函数
  const handleClickButton2 = useCallback(() => {
    setCount2(count2 + 1);
  }, [count2]);

  return (
    <div>
      <p>点击了{count}次</p>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        点击
      </button>
      <p>点击了number{number}次</p>
      <button
        onClick={() => {
          setNumber(number + 1);
        }}
      >
        点击number
      </button>
      <Context.Provider value={count}>
        <Child />
      </Context.Provider>

      <MathStore>
        <ShowNum />
        <Buttons />
      </MathStore>

      <Content count={count} />

      <div>
        <Button onClickButton={handleClickButton1}>Button1</Button>
      </div>
      <div>
        <Button onClickButton={handleClickButton2}>Button2</Button>
      </div>
      <div>
        <Button
          onClickButton={() => {
            setCount3(count3 + 1);
          }}
        >
          Button3
        </Button>
      </div>
    </div>
  );
}

export default Count;
